<template>
  <view>
    <!-- #ifndef MP-WEIXIN-->
    <my-navbar leftText="" title="我的优惠券" @leftClick="back"></my-navbar>
    <!-- #endif -->

    <view class="goods" v-for="(listitem, index) in list" :key="index">
      <view class="logo">
        <!-- <image src="" mode="scaleToFill" /> -->
        <text>{{ listitem.company_name }}</text>
        <image src="/static/images/right.png" mode="scaleToFill" />
      </view>
      <view class="solid"></view>
      <view class="content">
        <view
          class="copon_box copon flex-btw"
          v-for="(item, index) in listitem.coupons_list"
          :key="index"
        >
          <view class="left flex-center">{{
            item.coupons.type == 1 ? "普通券" : "现金券"
          }}</view>
          <view class="center flex-btw">
            <view class="center_left">
              <view class="price">￥{{ item.coupons.money }}</view>
              <view class="info" @click="alertInfo(item.coupons.describe)">
                <u-icon name="question-circle"></u-icon>
                <text class="info_text">使用说明</text>
              </view>
            </view>
            <view class="center_right">
              <view v-if="item.coupons.type == 1" class="rule"
                >满{{ item.coupons.order_money_limit }}使用</view
              >
              <view v-else-if="item.coupons.type == 2" class="rule"
                >无门槛</view
              >
              <view class="limit" v-if="item.coupons.get_limit"
                >每位用户限制{{ item.coupons.get_num }}张</view
              >
              <view class="limit" v-else>不限量</view>
              <view class="time" v-if="item.coupons.expire_type == 1">
                {{ parseTime(item.coupons.start_time) }}~{{
                  parseTime(item.coupons.end_time)
                }}
              </view>
              <view class="time" v-else-if="item.coupons.expire_type == 2"
                >限{{ item.coupons.expire_days }}天内使用
              </view>
            </view>
          </view>
          <view class="right" @click="toClassify(listitem.company_id)"
            >去使用</view
          >
        </view>
      </view>
    </view>
    <view v-if="nodata" class="nodata-box">
          <image
            class="nodata-pic"
            src="/static/images/coupon.png"
          ></image>
          <view class="nodata-txt">你没有任何优惠卷</view>
        </view>
    <view class="bot"></view>
    <view class="bottom flex-around">
      <view class="flex-center" @click="toAction('coupon_center')"
        >领券中心</view
      >
      <view class="line"></view>
      <view class="flex-center" @click="toAction('coupon_history')"
        >使用记录</view
      >
    </view>
    <u-modal
      v-model="info.show"
      :content="info.value"
      title="使用说明"
      confirm-color="#4FA388"
    ></u-modal>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { $https } from "@/static/js/request.js";
export default {
  computed: {
    ...mapState(["companyData"]),
  },
  data() {
    return {
      page: 1,
      list: [],
      info: {
        value: "",
        show: false,
      },
      nodata: false,
    };
  },
  onShow() {
    this.getData(1);
    // console.log("666", this.companyData);
  },
  methods: {
    getData(page) {
      var params = {
        size: 6,
        page,
        status: 0,
      };
      $https("GET", "getMyCouponsList", params, (res) => {
        if (res.data.errcode == 0) {
          this.page = page;
          if (page == 1) {
            if (res.data.data.list.length == 0) {
              this.nodata = true;
            } else {
              this.list = res.data.data.list;
              this.nodata = false;
            }
          } else {
            let oldData = this.list;
            this.list = oldData.concat(res.data.data.list);
          }
          this.count = res.data.data.count;
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    toAction(type) {
      uni.navigateTo({
        url: `/pages/user/coupon/${type}`,
      });
    },
    alertInfo(info) {
      this.info.value = info;
      this.info.show = true;
    },
    parseTime(time) {
      time = time * 1000;
      var date = new Date(time);
      var year = date.getFullYear(),
        month =
          date.getMonth() + 1 < 9
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1,
        day = date.getDate() < 9 ? "0" + date.getDate() : date.getDate();
      return `${year}-${month}-${day}`;
    },
    back() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
    toClassify(id) {
      let row = this.companyData.filter((item) => item.supplier_id == id)[0];
      this.$store.commit("changeCompanyInfo", row);
      sessionStorage.setItem("changeCompanyInfo", JSON.stringify(row));
      uni.switchTab({
        url: `/pages/tabar/classify`,
      });
    },
  },
  onReachBottom() {
    if (this.list.length < this.count) {
      this.page++;
      this.getData(this.page);
    }
  },
};
</script>

<style lang="scss">
.goods {
  background: #ffffff;
  border-radius: 10rpx 10rpx 0rpx 0rpx;
  margin: 10rpx 25rpx 0 25rpx;
  font-family: PingFang SC;
  .logo {
    height: 90rpx;
    padding-left: 30rpx;
    display: flex;
    align-items: center;
    text {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    image {
      margin-left: 10rpx;
      height: 20rpx;
      width: 18rpx;
    }
  }
  .solid {
    width: 690rpx;
    height: 2rpx;
    background: #ebebeb;
    margin-left: 4rpx;
  }

  .content {
    padding: 20rpx 30rpx 20rpx 30rpx;

    .copon_box {
      width: 638rpx;
      height: 164rpx;
      background: url(../../../static/image/coupon.png) no-repeat;
      background-size: 100% 100%;
      padding: 0 30rpx;
      margin-bottom: 20rpx;

      .left {
        min-height: 150rpx;
        width: 40rpx;
        word-wrap: wrap;
        font-size: 28rpx;
        line-height: 35rpx;
        border-radius: 4rpx;
        text-align: center;
        padding: 10rpx 0;
        transform: scale(0.8);
      }

      .right {
        width: 40rpx;
        word-wrap: wrap;
        font-size: 22rpx;
        line-height: 26rpx;
        border: 1px solid #fff;
        border-radius: 6rpx;
        text-align: center;
        padding: 10rpx 0;
        margin-left: 40rpx;
      }

      .center {
        flex: 1;

        .center_left {
          text-align: center;
          width: 50%;

          .price {
            font-size: 40rpx;
            font-weight: bold;
          }

          .info {
            color: #a4a4a4;
            font-size: 16rpx;

            .info_text {
              text-decoration: underline;
              margin-left: 4rpx;
            }
          }
        }

        .center_right {
          text-align: center;
          width: 50%;

          .rule {
            font-size: 24rpx;
          }

          .limit {
            font-size: 20rpx;
            // #ifndef MP-WEIXIN
            transform: scale(0.8);
            // #endif
          }

          .time {
            font-size: 20rpx;
            border-radius: 16rpx;
            padding: 4rpx;
            // #ifndef MP-WEIXIN
            transform: scale(0.7);
            line-height: 22rpx;
            // #endif
            // #ifdef MP-WEIXIN
            transform: scale(0.9);
            // #endif
          }
        }
      }

      &.copon {
        .left {
          background: #f6d32d;
          color: #c6272a;
        }

        .right {
          color: #f6d32d;
          border-color: #f6d32d;
        }

        .center_left {
          .price {
            color: #c6272a;
          }
        }

        .center_right {
          color: #757575;

          .rule {
            color: #191919;
          }

          .time {
            background: #e9adae;
          }
        }
      }

      &.copon_used {
        background: url(../../../static/image/coupon_used.png) no-repeat;
        background-size: 100% 100%;

        .left,
        .right {
          background: #cccccc;
          color: #787878;
          border-color: #b3b3b3;
        }

        .center_left {
          .price {
            color: #cccccc;
          }
        }

        .center_right {
          color: #cccccc;

          .rule {
            color: #cccccc;
          }

          .time {
            background: #ececec;
          }
        }
      }
    }
  }
}

.bot {
  padding-bottom: 120rpx;
}

.bottom {
  font-family: PingFang SC;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #fff;
  font-size: 32rpx;
  color: #191919;
  padding: 0 20rpx;

  view {
    width: 100%;
    height: 100%;
  }

  .line {
    width: 2rpx;
    height: 54rpx;
    background: #eaeaea;
  }
}
.nodata-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.nodata-pic {
  width: 400rpx;
  height: 300rpx;
}
.nodata-txt {
  text-align: center;
  font-size: 32rpx;
  color: #666666;
  padding-top: 30rpx;
}
</style>
